<template>
	<view class="change-password">
		<view class="change-main">
			<view class="cm-item">
				<view class="transfer-sign-tit"><text>原密码</text></view>
				<view class="transfer-sign">
					<input type="password" v-model="password" placeholder="请输入旧密码" @blur="loseFocus('password')" @input="enterAccount('password')" maxlength="12" />
					<image v-show="isPassword.delete" @click="onDelete('password')" class="close" src="../../../static/empty/close.png" mode=""></image>
				</view>
			</view>

			<view class="cm-item">
				<view class="transfer-sign-tit"><text>新密码</text></view>
				<view class="transfer-sign">
					<input
						type="password"
						v-model="newPassword"
						placeholder="请输入新密码（6-12位字母+数字）"
						@blur="loseFocus('newPassword')"
						@input="enterAccount('newPassword')"
						maxlength="12"
					/>
					<image v-show="isNewPassword.delete" @click="onDelete('newPassword')" class="close" src="../../../static/empty/close.png" mode=""></image>
				</view>
			</view>

			<view class="cm-item">
				<view class="transfer-sign-tit"><text>确认新密码</text></view>
				<view class="transfer-sign">
					<input
						type="password"
						v-model="againPassword"
						placeholder="请确认新密码（6-12位字母+数字）"
						@blur="loseFocus('againPassword')"
						@input="enterAccount('againPassword')"
						maxlength="12"
					/>
					<image v-show="isAgainPassword.delete" @click="onDelete('againPassword')" class="close" src="../../../static/empty/close.png" mode=""></image>
				</view>
			</view>
		</view>

		<view class="pd-buttom"><view class="pdb-con" @click="confirm()">确认</view></view>

		<successPop :showPopup="showPopup" :showTitle="'修改成功'" @confirm="determine"></successPop>
	</view>
</template>

<script>
import { validate } from '@/common/utils/index';
import successPop from '@/components/xs-components/success-pop/success-pop.vue';
export default {
	components: { successPop },
	data() {
		return {
			password: '',
			newPassword: '',
			againPassword: '',
			showPopup: false,
			isPassword: {
				focus: false,
				delete: false
			},
			isNewPassword: {
				focus: false,
				delete: false
			},
			isAgainPassword: {
				focus: false,
				delete: false
			}
		};
	},
	onLoad() {
		// console.log(this.letterList)
	},
	created() {
		// console.log(this.letterList.length)
	},
	methods: {
		// 确认
		confirm() {
			const { password, newPassword, againPassword } = this;

			if (password == '') return this.$message.info('请输入旧密码');
			if (newPassword == '') return this.$message.info('请输入新密码');
			if (!validate(newPassword, 'password')) return this.$message.info('请设置密码为6-12位字母加数字的组合');
			if (againPassword == '') return this.$message.info('请确认新密码');
			if (!validate(againPassword, 'password')) return this.$message.info('请设置密码为6-12位字母加数字的组合');
			if (newPassword != againPassword) return this.$message.info('两次密码输入不一致');
			if (password == newPassword) return this.$message.info('新密码不能与旧密码一致');

			const data = {
				security_code: password,
				password: newPassword,
				password_code: againPassword
			};
			this.$popup.showLoading();
			this.changePassword(data);
		},
		// 更改密码
		changePassword(data) {
			this.$api
				.post(global.apiUrls.postForgetPasswordCode, data)
				.then(res => {
					console.log(res);
					uni.hideLoading();
					// this.$popup.showToast(res.data.msg, 2000);
					if (res.data.code == 1) {
						uni.removeStorageSync('USER_TOKEN');
						uni.removeStorageSync('USER_INFO');
						this.showPopup = true;
					} else {
						this.$message.info(res.data.msg);
					}
				})
				.catch(err => {
					// this.$popup.showToast('保存失败')
				});
		},
		// 修改成功 确认
		determine(e) {
			this.showPopup = e;
			setTimeout(() => {
				uni.reLaunch({
					url: '../../login/login/index'
				});
			}, 100);
		},
		onDelete(e) {
			console.log(e);
			if (e == 'password') {
				this.password = '';
				this.isPassword.focus = true;
				this.isPassword.delete = false;
			} else if (e == 'newPassword') {
				this.newPassword = '';
				this.isNewPassword.focus = true;
				this.isNewPassword.delete = false;
			} else if (e == 'againPassword') {
				this.againPassword = '';
				this.isAgainPassword.focus = true;
				this.isAgainPassword.delete = false;
			}
		},
		loseFocus(e) {
			if (e == 'password') {
				this.isNewPassword.focus = false;
			} else if (e == 'newPassword') {
				this.isPassword.focus = false;
			} else if (e == 'againPassword') {
				this.isAgainPassword.focus = false;
			}
		},
		enterAccount(e) {
			if (e == 'password') {
				if (this.password != '') {
					this.isPassword.delete = true;
				} else {
					this.isPassword.delete = false;
				}
			} else if (e == 'newPassword') {
				if (this.newPassword != '') {
					this.isNewPassword.delete = true;
				} else {
					this.isNewPassword.delete = false;
				}
			} else if (e == 'againPassword') {
				if (this.againPassword != '') {
					this.isAgainPassword.delete = true;
				} else {
					this.isAgainPassword.delete = false;
				}
			}
		},
		loseFocus(e) {
			if (e == 'mobile') {
				// console.log(111111)
				this.isMobile.focus = false;
			} else if (e == 'password') {
				this.isPassword.focus = false;
			}
		}
	}
};
</script>

<style lang="scss">
@import './change-password.scss';
</style>
